import {
  ChangeEventHandler,
  FocusEventHandler,
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react'
import { clsx } from 'clsx'

import EyeIcon from '../../atoms/fundamentals/icons/eye-icon'
import EyeOffIcon from '../../atoms/fundamentals/icons/eye-off-icon'
import LockIcon from '../../atoms/fundamentals/icons/lock-icon'

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  key?: string
  onChange?: ChangeEventHandler<HTMLInputElement>
  onFocus?: FocusEventHandler<HTMLInputElement>
  props?: React.HTMLAttributes<HTMLDivElement>
}

const SigninInput = forwardRef(
  (
    { placeholder, name, key, onChange, onFocus, className, type, ...props }: InputProps,
    ref
  ) => {
    const inputRef = useRef(null)
    const [showPassword, setShowPassword] = useState(false)
    const [inputType, setInputType] = useState(type)

    useEffect(() => {
      if (type === 'password' && showPassword) {
        setInputType('text')
      }

      if (type === 'password' && !showPassword) {
        setInputType('password')
      }
    }, [type, showPassword])

    useImperativeHandle(ref, () => inputRef.current)

    return (
      <div
        className={clsx(
          'rounded-rounded h-[40px] w-[280px] overflow-hidden border',
          'bg-grey-5 inter-base-regular placeholder:text-grey-40',
          'focus-within:shadow-input focus-within:border-violet-60',
          'flex items-center',
          {
            'text-grey-40 pl-xsmall pointer-events-none focus-within:border-none focus-within:shadow-none':
              props.readOnly,
          },
          className
        )}
      >
        <input
          className={clsx(
            'remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0',
            {
              'pl-xsmall': props.readOnly,
            }
          )}
          ref={inputRef}
          name={name}
          key={key || name}
          placeholder={placeholder || 'Placeholder'}
          onChange={onChange}
          onFocus={onFocus}
          type={inputType}
          {...props}
        />
        {type === 'password' && (
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
          >
            {showPassword ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
          </button>
        )}
        {props.readOnly && <LockIcon size={16} className="text-grey-40 mr-base" />}
      </div>
    )
  }
)

SigninInput.displayName = 'SigninInput'

export default SigninInput
